<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_项目增长收缩</title>
    <!--<style>
        .box > div, .example {
            width: 200px;
            height: 200px;
            background-color: yellow;
            border: 3px solid red;
        }
        .box {
          display: flex;
          background-color: lightsteelblue;
        }
        .item3 {
          /*当父元素有剩余空间时，子项目默认不会增长，但若设置了此属性，按照比例分配父元素的剩余空间*/
          flex-grow: 1;
        }
        .item4 {
          flex-grow: 2;
        }
    </style>-->
    <style>
        .box > div, .example {
            width: 200px;
            height: 200px;
            background-color: yellow;
            border: 2px solid red;
        }

        .box {
            display: flex;
            width: 1000px;
        }

        .item3 {
            flex-shrink: 0;
        }

        .item4 {
            flex-shrink: 1;
        }

        .item5 {
            flex-shrink: 5;
        }
    </style>
</head>
<body>
  <div class="example">参考大小</div>
  <div class="box">
      <div class="item1">1</div>
      <div class="item2">2</div>
      <div class="item3">3</div>
      <div class="item4">4</div>
      <div class="item5">5</div>
      <div class="item6">6</div>
      <div class="item7">7</div>
  </div>
</body>
</html>